<template>
  <IBizRow :class="classArr" :layout="{ layout: 'FLEX' }">
    <template v-for="slot in $slots.default?.() || []" :key="slot.key">
      <template v-if="!(slot.props as IData) || !(slot.props as IData).controller">
        <slot :name="slot.props?.name" />
      </template>
      <template v-else>
        <IBizCol
          :layoutPos="(slot.props as IData).modelData.layoutPos"
          :state="(slot.props as IData).controller.state"
        >
          <slot :name="slot.props?.name" />
        </IBizCol>
      </template>
    </template>
  </IBizRow>
</template>

<script setup lang="ts">
import { IPanelContainer } from '@ibiz/model-core'
import { computed } from 'vue'
import { useNamespace } from '@/use'
import { ScrollContainerItemController } from './i-biz-scroll-container-item.controller'

// 定义组件接收的属性
const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  controller: {
    type: ScrollContainerItemController,
    required: true,
  },
})

// 获取命名空间和计算类名数组
const ns = useNamespace('scroll-container-item')
const { id } = props.modelData
const classArr = computed(() => {
  const result: Array<string | false> = [
    ns.b(),
    ns.m(id),
    ns.is('hidden', !props.controller.state.visible),
  ]
  return result
})
</script>
<style lang="scss">
@import './i-biz-scroll-container-item';
</style>
